<template>
  <section>
    <div class="warp1">
      <ul class="item">
        <li>
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="date1">哈希地址</span>
            <span class="date">交易环节</span>
            <span class="title">日期</span>
          </div>
        </li>
      </ul>
    </div>
    <vue-seamless-scroll :data="list" class="warp" :class-option="classOption">
      <ul class="item">
        <li v-for="(item, index) in list" :key="index">
          <div class="item-div" style="padding: 15px; margin: 0px;">
            <span class="date1" v-text="item.blockInfoObj.transactionHash"></span>
            <span class="date" v-text="item.blockInfoObj.jieduan"></span>
            <span class="title" v-text="item.createTime"></span>
          </div>
        </li>
      </ul>
    </vue-seamless-scroll>
  </section>
</template>
<script>
export default {
  data() {
    return {
      list: [],
      listQuery: {}, // 保留查询参数结构
      classOption: {
        direction: 0,
        step: 0.1,
        limitMoveNum: 5,  // 优化滚动效果
        singleHeight: 54,  // 根据实际行高设置
        waitTime: 2000     // 滚动间隔时间
      }
    }
  },
  created() {
    this.getList();
  },
  methods: {
    getList() {
      // 生成20条模拟数据
      this.list = Array.from({ length: 20 }, (_, i) => {
        const timestamp = new Date(Date.now() - i * 600000)
          .toISOString()
          .replace('T', ' ')
          .slice(0, 19);
        
        return {
          blockInfo: JSON.stringify({
            transactionHash: '0x' + Math.random().toString(16).substr(2, 64),
            jieduan: ['生产溯源', '加工记录', '物流追踪'][i % 3]
          }),
          createTime: timestamp,
          blockInfoObj: null // 保留原解析逻辑
        };
      });

      // 保持原有解析逻辑
      this.list.forEach(item => {
        item.blockInfoObj = JSON.parse(item.blockInfo);
      });
    }
  }
}
</script>


<style lang="scss" scoped>
.warp1 {
  height: 60px;
  width: 100%;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date,
        .date1 {
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }

        .title {
          width: 70px;
          text-align: center;
          flex: 1;
        }

        .date {
          margin-left: 30px;
          text-align: left;
        }

        .date1 {
          width: 80px;
          margin-left: 30px;
          text-align: center;
        }
      }
    }
  }
}
.warp {
  height: 268px;
  width: 100%;
  margin: 0 auto;
  // margin-top: 20px;
  overflow: hidden;
  ul {
    list-style: none;
    padding: 0;
    margin: 0 auto;
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .item-div {
        display: flex;
        align-items: flex-start;
        width: 100%;
        color: #606266;
        font-size: 14px;
        border-bottom: 1px solid #e5e1e1; // 将 #000000 替换为你想要的颜色
        flex-wrap: wrap; // 使子元素在溢出时换行

        .title,
        .date,
        .date1 {
          word-wrap: break-word; // 使长单词在容器边界处换行
          word-break: break-all; // 强制在任意字符处换行
          flex: 1 1 auto; // 允许span在需要时换行
          min-width: 0; // 防止 flex 元素超出容器宽度
        }

        .title {
          width: 70px;
          text-align: center;
          flex: 1;
        }

        .date {
          margin-left: 50px;
          text-align: left;
        }

        .date1 {
          width: 80px;
          margin-left: 10px;
          text-align: center;
        }
      }
    }
  }
}
</style>
